<template>
  <div>
    <div>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-input v-model="serachMenuDto.searchValue" placeholder="输入搜索内容"/>
        </el-col>
        <el-col :span="5">
          <el-select v-model="serachMenuDto.nodeType">
            <el-option label="目录" value="1"/>
            <el-option label="菜单" value="2"/>
            <el-option label="按钮" value="3"/>
          </el-select>
        </el-col>
        <el-col :span="1.3">
          <el-button type="primary" @click="menuSearch">搜索</el-button>
        </el-col>
        <el-col :span="2">
          <el-button color="#098cc0" @click="addDialog=true">新增</el-button>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-table :data="menus" show-overflow-tooltip>
        <el-table-column prop="id" label="编号"/>
        <el-table-column prop="name" label="名称"/>
        <el-table-column prop="menuCode" label="菜单编码"/>
        <el-table-column prop="parentId" label="父节点编号"/>
        <el-table-column prop="nodeType" label="类型"/>
        <el-table-column prop="linkUrl" label="组件位置"/>
        <el-table-column prop="iconId" label="图标标识"/>
        <el-table-column prop="sort" label="排序"/>
        <el-table-column prop="path" label="路由"/>
        <el-table-column prop="createTime" label="创建时间"/>
        <el-table-column label="操作">
          <template #default="item">
            <el-text class="mx-1" type="danger" @click="openDeletePopUps(item.row) ">删除</el-text>
            <el-divider direction="vertical"/>
            <el-text class="mx-1" type="danger" @click="openUpdatePopUps(item.row)">修改</el-text>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination background layout="prev, pager, next"
                     hide-on-single-page
                     v-model:page-size="pageInfo.pageSize"
                     v-model:current-page="pageInfo.pageNum"
                     :total="pageInfo.totalNum"/>
    </div>
  </div>
  <!--新增弹窗-->
  <div>
    <el-dialog
        v-model="addDialog"
        title="新增"
        width="50%"
        @close="fromRef.resetFields()"
        draggable
    >
      <el-form :model="addMenuInfo" ref="fromRef" label-width="80" :rules="rules" inline>
        <el-form-item label="图标">
          <el-upload
              v-model:file-list="fileList"
              name="files"
              :action="$upFile"
              :headers="header"
              :data="fileInfoVo"
              :on-success="upfile"
              :limit="1"
          >
            <el-button type="primary">
              <el-icon>
                <Plus/>
              </el-icon>
            </el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="权限类型" prop="nodeType">
          <el-radio-group v-model="addMenuInfo.nodeType">
            <el-radio label="1">目录</el-radio>
            <el-radio label="2">菜单</el-radio>
            <el-radio label="3">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="addMenuInfo.name" placeholder="请输入权限名称" clearable/>
        </el-form-item>
        <el-form-item label="权限编码" prop="menuCode">
          <el-input v-model="addMenuInfo.menuCode" placeholder="请输入权限编码" clearable/>
        </el-form-item>
        <el-form-item label="上级目录" prop="parentId">
          <el-tree-select
              v-model="addMenuInfo.parentId"
              :data="directoryPer"
              :props="props1"
              check-strictly
              @visible-change="getDirectory"
              :render-after-expand="false"
              style="width: 240px"
          />
        </el-form-item>
        <el-form-item label="层级" prop="level">
          <el-select
              v-model="addMenuInfo.level"
              placeholder="请选择层级"
              style="width: 240px"
          >
            <el-option key="0" label="一级" value="0"/>
            <el-option key="1" label="二级" value="1"/>
            <el-option key="2" label="三级" value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item label="访问路由" prop="path">
          <el-input v-model="addMenuInfo.path" placeholder="请输入path" clearable/>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="addMenuInfo.sort" placeholder="请输入path" clearable/>
        </el-form-item>
        <el-form-item label="组件位置" prop="linkUrl" v-show="addMenuInfo.nodeType===2">
          <el-input v-model="addMenuInfo.linkUrl" placeholder="请输入url" clearable/>
        </el-form-item>
        <el-form-item label="是否可以关闭" v-show="addMenuInfo.nodeType===2">
          <el-radio-group v-model="addMenuInfo.isClose" class="ml-4">
            <el-radio :label="1" size="large">是</el-radio>
            <el-radio :value="0" size="large">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="addDialog = false">取消</el-button>
        <el-button color="#098cc0" @click="submitAdd(fromRef)">
          确定
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
  <!--  修改弹窗-->
  <div>
    <el-dialog
        v-model="updateDialog"
        title="修改"
        width="50%"
        @close="fromRef.resetFields()"
        draggable
    >
      <div class="add_box">
        <el-form :model="updateMenuInfo" ref="fromRef" label-width="80" inline>
          <el-form-item label="图标">
            <el-image :src="$imgBaseUrl+updateMenuInfo.iconId" style="height: 50px;width: 50px"></el-image>
            <el-upload
                v-model:file-list="fileList"
                name="files"
                :action="$upFile"
                :headers="header"
                :data="fileInfoVo"
                :on-success="(res) => {updateMenuInfo.iconId=res.data}"
                :limit="1"
            >
              <el-button type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="权限名称" prop="name">
            <el-input v-model="updateMenuInfo.name" placeholder="请输入权限名称" clearable/>
          </el-form-item>
          <el-form-item label="权限编码" prop="menuCode">
            <el-input v-model="updateMenuInfo.menuCode" placeholder="请输入权限编码" clearable/>
          </el-form-item>
          <el-form-item label="权限类型" prop="nodeType">
            <el-radio-group v-model="updateMenuInfo.nodeType">
              <el-radio :label="1">目录</el-radio>
              <el-radio :label="2">菜单</el-radio>
              <el-radio :label="3">按钮</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="上级目录" prop="parentId">
            <el-tree-select
                v-model="updateMenuInfo.parentId"
                :data="directoryPer"
                :props="props1"
                check-strictly
                @visible-change="getDirectory"
                show-checkbox
                :render-after-expand="false"
                style="width: 240px"
            />
          </el-form-item>
          <el-form-item label="层级" prop="level">
            <el-select
                v-model="updateMenuInfo.level"
                placeholder="请选择层级"
                style="width: 240px"
            >
              <el-option key="0" label="一级" value="0"/>
              <el-option key="1" label="二级" value="1"/>
              <el-option key="2" label="三级" value="2"/>
            </el-select>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input v-model="updateMenuInfo.sort" placeholder="请输入排序规则" clearable/>
          </el-form-item>
          <el-form-item label="路由名称" prop="path">
            <el-input v-model="updateMenuInfo.path" placeholder="请输入path" clearable/>
          </el-form-item>
          <el-form-item label="组件位置" prop="linkUrl" v-show="updateMenuInfo.nodeType===2">
            <el-input v-model="updateMenuInfo.linkUrl" placeholder="请输入url" clearable/>
          </el-form-item>
          <el-form-item label="是否可以关闭" v-show="updateMenuInfo.nodeType===2">
            <el-radio-group v-model="updateMenuInfo.isClose">
              <el-radio :label="1" size="large">是</el-radio>
              <el-radio :label="0" size="large">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="addDialog = false">取消</el-button>
        <el-button color="rgba(4, 114, 53, 0.8)" @click="submitUpdate">
          保存
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref, watch} from "vue";
import {
  getAllMenusByPage,
  addMenu,
  updateMenu,
  deletePermission,
  getDirectoryPermissionByTree
} from '@/api/home/permission/menus'
import {getNullFiltration} from '@/util/Utils'
import {getToken} from "@/util/token/tokenUtil";
import {ElMessage, ElMessageBox, ElNotification} from 'element-plus'

/*数据封装区域*/
let fromRef = ref()
let fileList = ref([])
let menus = ref([])
let pageInfo = reactive({
  totalNum: 0,
  pageNum: 1,
  pageSize: 13,
})
let addMenuInfo = ref({
  id: '',
  name: '',
  menuCode: '',
  parentId: '',
  nodeType: '1',//此处修改为数字类型并把上面中的单选框改为数字类型后，传给后端该此段丢失(存疑)
  sort: '',
  level: '',
  iconId: '',
  path: '',
  linkUrl: '',
  isClose: 1
})
let directoryPer = ref([])
const props1 = {
  checkStrictly: true,
  label: "name",
  value: 'id'
}
let updateMenuInfo = ref({})
let serachMenuDto = reactive({
  searchValue: '',
  nodeType: ''
})
let addDialog = ref(false)
let updateDialog = ref(false)
const header = {
  token: getToken('token')
}
let fileInfoVo = ref({
  bucketName: 'system',
  folderName: 'icon/menu',
  fileName: '',
  filePath: ''
})
/*初始化区域*/
onMounted(() => {
  menuSearch()
})

/*方法事件区域*/
function menuSearch() {
  getMenus(pageInfo.pageNum, pageInfo.pageSize, serachMenuDto)
}

/**
 * 获取类型为目录的权限（树形结构）
 */
function getDirectory() {
  directoryPer.value = []
  getDirectoryPermissionByTree().then(res => {
    directoryPer.value.push({
      name: "一级",
      id: '0',
      children: res.data
    })
  })
}

function getMenus(pageNum, pageSize, searchMenuDto) {
  getAllMenusByPage(pageNum, pageSize, searchMenuDto).then(res => {
    pageInfo.totalNum = res.data.total - 0/*转为数字类型*/
    menus.value = res.data.records
  })
}

function upfile(res) {
  addMenuInfo.value.iconId = res.data
}

function submitAdd(r) {
  r.validate((valid) => {
    console.log(valid)
    if (valid) {
      addMenu(getNullFiltration(addMenuInfo.value)).then(() => {
        menuSearch()
      })
      addDialog.value = false
    } else {
      return false
    }
  })
}

function openUpdatePopUps(menu) {
  /*此处不能直接赋值，直接赋值是将地址引用，修改值会将循环列表的值也修改了*/
  updateMenuInfo.value = {...menu}
  updateDialog.value = true
}

function openDeletePopUps(node) {
  ElMessageBox.confirm(
      '删除该权限将不能恢复，是否确定？',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    deletePermission(node.id).then(() => {
      ElNotification({
        title: '提示',
        message: '刷新页面立即生效！',
        type: 'success',
      })
    })
  })
}

function submitUpdate() {
  updateMenu(updateMenuInfo.value)
  updateDialog.value = false
}

/*监听事件区域*/
watch(() => pageInfo.pageNum, () => {
  console.log("改变")
  getMenus(pageInfo.pageNum, pageInfo.pageSize, serachMenuDto)
})

/*校验规则*/


let rules = reactive({
  name: [
    {required: true, message: '请输入权限名称', trigger: 'blur'},
  ],
  menuCode: [
    {required: true, message: '请输入权限编码', trigger: 'blur'},
  ],
  parentId: [
    {required: true, message: '父节点不能为空', trigger: 'blur'},
  ],
  path: [
    {required: true, message: "路由名称不能为空!", trigger: 'blur'},
  ],
  // linkUrl: [
  //   {validator: linkUrlRules, trigger: 'blur'},
  // ],
  nodeType: [
    {required: true, message: '权限类型不能为空', trigger: 'blur'},
  ]
})

</script>

<style scoped>


</style>
